<template>
<div class="home">
    <banner isHome="true"></banner>

    <el-row>
        <el-col :span="6">
            <div class="category">
                <el-table :data="catagoryList" @row-click="getPostByCate" element-loading-text="Loading" show-header:false stripe fit highlight-current-row>
                    <el-table-column>
                        <template slot-scope="scope" align="center">
                            {{ scope.row.title }}
                        </template>
                    </el-table-column>
                    <el-table-column width="110" align="center">
                        <template slot-scope="scope">
                            <el-tag type="danger">{{ scope.row.postCount }}</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-col>
        <el-col :span="18">

            <div class="site-content animate">

                <!--通知栏-->
                <div class="notify">
                    <div class="search-result" v-if="hideSlogan">
                        <span v-if="searchWords">搜索结果："{{searchWords}}" 相关文章</span>
                        <span v-else-if="category">分类 "{{category}}" 相关文章</span>
                    </div>
                    <quote v-else>{{notice}}</quote>
                </div>

                <main class="site-main" :class="{'search':hideSlogan}">
                    <section-title v-if="!hideSlogan">推荐</section-title>
                    <template v-for="item in postList">
                        <post :post="item" :key="item.id"></post>
                    </template>
                </main>

                <!--加载更多-->
                <div class="more" v-show="hasNextPage">
                    <div class="more-btn" @click="loadMore">More</div>
                </div>
                <div v-show="!hasNextPage">
                    <el-divider>没有了</el-divider>
                </div>

                <!--文章列表-->

            </div>
        </el-col>
    </el-row>
</div>
</template>

<script>
import Banner from "@/components/banner";
import sectionTitle from "@/components/section-title";
import Post from "@/components/post";
import SmallIco from "@/components/small-ico";
import Quote from "@/components/quote";
import {
    fetchFocus,
    fetchList,
    fetchCategory
} from "../api";

export default {
    name: "Home",
    props: ["cate", "words"],
    data() {
        return {
            features: [],
            postList: [],
            currPage: 1,
            hasNextPage: false,
            postsPage: {
                pageNum: 1,
                pageSize: 10,
                category: "",
                searchWords: "",
            },
            catagoryList: [],
            category: ""
        };
    },
    components: {
        Banner,
        sectionTitle,
        Post,
        SmallIco,
        Quote,
    },
    computed: {
        searchWords() {
            return this.$route.params.words;
        },
        hideSlogan() {
            return this.category || this.searchWords;
        },
        notice() {
            return this.$store.getters.websiteInfo.notice;
        },
    },

    //路由监听，当路由发生改变时执行
    watch: {
        "$route.path": function (newVal, oldVal) {
            this.getPosts();
        },
    },
    mounted() {
        this.doDetchCategory();
        this.getCategory()
        this.getPosts();

    },
    methods: {
        getPosts() {
            this.postsPage.category = this.category;
            this.postsPage.searchWords = this.searchWords;
            fetchList(this.postsPage)
                .then((res) => {
                    this.postList = res.data.records || [];
                    this.currPage = res.data.current;
                    this.hasNextPage = res.data.total > res.data.current * res.data.size;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        doDetchCategory() {
            fetchCategory().then((res) => {
                this.catagoryList = res.data;
            });
        },
        loadMore() {
            this.postsPage.pageNum += 1;
            fetchList(this.postsPage).then((res) => {
                this.postList = this.postList.concat(res.data.records || []);
                this.currPage = res.data.current;
                this.hasNextPage = res.data.total > res.data.current * res.data.size;
            });
        },
        getPostByCate(row) {
            this.postsPage.pageNum = 1;
            this.category = row.title
            this.getPosts();
        },

        getCategory() {
            this.category = this.$route.params.cate;
        },
    },
};
</script>

<style lang="less" scoped>
.site-content {
    .notify {
        margin: 60px 0;
        border-radius: 3px;

        &>div {
            padding: 20px;
        }
    }

    .search-result {
        padding: 15px 20px;
        text-align: center;
        font-size: 20px;
        font-weight: 400;
        border: 1px dashed #ddd;
        color: #828282;
    }
}

.category {
    padding: 0 0 0 30px;
    margin: 60px 0;
}

.categoryItem {
    border: #828282;
}

.top-feature {
    width: 100%;
    height: auto;
    margin-top: 30px;

    .feature-content {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        position: relative;

        .feature-item {
            width: 32.9%;
        }
    }
}

.site-main {
    &.search {
        padding-top: 0;
    }
}

.more {
    margin: 50px 0;

    .more-btn {
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #adadad;
        border: 1px solid #adadad;
        border-radius: 20px;
        margin: 0 auto;
        cursor: pointer;

        &:hover {
            color: #8fd0cc;
            border: 1px dashed #8fd0cc;
        }
    }
}

/******/
@media (max-width: 800px) {
    .top-feature {
        display: none;
    }

    .site-main {
        padding-top: 40px;
    }

    .site-content {
        padding: 0;

        .notify {
            margin: 30px 0 0 0;
        }

        .search-result {
            margin-bottom: 20px;
            font-size: 16px;
        }
    }
}

/******/
</style>
